import React, {useMemo} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import {useHeaderHeight} from '@react-navigation/stack';
import {ConnectedProps, connect} from 'react-redux';
import {RouteProp} from '@react-navigation/native';
import {BlurView} from '@react-native-community/blur';
import {RootState} from '@/models/index';
import {
  RootStackParamList,
  // RootStackNavigation,
  ModalStackNavigation,
} from '@/navigator/index';
import {useDidMount} from '@/utils/index';
import coverRight from '@/assets/cover-right.png';
import defaultAvatar from '@/assets/default_avatar.png';
import Tab from './Tab';
import {IProgram} from '@/models/album';
const mapStateToProps = (state: RootState) => {
  return {
    album: state.album,
  };
};

const connector = connect(mapStateToProps);

type ModelState = ConnectedProps<typeof connector>;

interface IProps extends ModelState {
  route: RouteProp<RootStackParamList, 'Album'>;
  navigation: ModalStackNavigation;
}

const Album: React.FC<IProps> = props => {
  const {dispatch, route, album, navigation} = props;
  const {id, title, image} = route.params.item;
  const {summary, author} = album;
  const headerHeight = useHeaderHeight();
  useDidMount(() => {
    dispatch({
      type: 'album/fetchAlbum',
      payload: {
        id,
      },
    });
  });
  const onItemPress = (data: IProgram, index: number) => {
    const {list} = album;
    const previousItem = list[index - 1];
    const nextItem = list[index + 1];
    dispatch({
      type: 'player/setState',
      payload: {
        previousId: previousItem?.id || '',
        nextId: nextItem?.id || '',
        title: data.title,
        thumbnailUrl: route.params.item.image,
        sounds: list.map(item => ({id: item.id, title: item.title})),
      },
    });
    navigation.navigate('Detail', {id: data.id});
  };

  const renderHeader = useMemo(() => {
    console.log('album', album);
    return (
      <View style={[styles.header, {paddingTop: headerHeight}]}>
        <Image style={styles.background} source={{uri: image}} />
        {/* 模糊组件  会覆盖之前的组件形成模糊 */}
        <BlurView
          style={StyleSheet.absoluteFillObject}
          blurType="light" //模糊类型
          blurAmount={4} //模糊程度
        />
        <View style={styles.leftView}>
          <Image
            style={styles.thumbnail}
            source={image ? {uri: image} : defaultAvatar}
          />
          <Image style={styles.coverRight} source={coverRight} />
        </View>
        <View style={styles.rightView}>
          <Text style={styles.title}>{title}</Text>
          <View style={styles.summary}>
            <Text numberOfLines={1} style={styles.summaryText}>
              {summary}
            </Text>
          </View>
          <View style={styles.author}>
            <Image
              style={styles.avatar}
              source={author.avatar ? {uri: author.avatar} : defaultAvatar}
            />
            <Text style={styles.authorName}>{author.name}</Text>
          </View>
        </View>
      </View>
    );
  }, [album, author, headerHeight, image, summary, title]);

  return (
    <View style={styles.container}>
      {renderHeader}
      <Tab onItemPress={onItemPress} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    height: 260,
    flexDirection: 'row',
    paddingHorizontal: 20,
    alignItems: 'center',
  },
  background: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: '#eee',
  },
  leftView: {
    marginRight: 26,
  },
  thumbnail: {
    width: 98,
    height: 98,
    borderColor: '#fff',
    borderWidth: StyleSheet.hairlineWidth,
    borderRadius: 8,
    backgroundColor: '#FFF',
  },
  coverRight: {
    height: 70,
    position: 'absolute',
    right: -20,
    resizeMode: 'contain',
  },
  rightView: {
    flex: 1,
  },
  title: {
    color: '#FFF',
    fontSize: 18,
    fontWeight: '900',
  },
  summary: {
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
    padding: 10,
    marginVertical: 10,
    borderRadius: 4,
  },
  summaryText: {
    color: '#FFF',
  },
  author: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatar: {
    width: 26,
    height: 26,
    borderRadius: 13,
    marginRight: 8,
  },
  authorName: {
    color: '#FFF',
  },
});

export default connector(Album);
